<!DOCTYPE html>
<html>
<head>
    <title>微信俄罗斯方块</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        #game {
            border: 2px solid #333;
            margin: 0 auto;
            display: block;
            background: #f0f0f0;
        }
        body {
            text-align: center;
            background: #f8f8f8;
        }
    </style>
</head>
<body>
    <canvas id="game" width="300" height="600"></canvas>
    <p>得分：<span id="score">0</span></p >
    <p style="color:#888">手机建议外接键盘操作</p >

<script>
// 基础配置
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const BLOCK_SIZE = 30;
const COLS = 10, ROWS = 20;
let score = 0;

// 七种经典方块形状
const SHAPES = [
    [[1,1,1,1]], // I
    [[1,1,1],[0,1,0]], // T
    [[1,1,1],[1,0,0]], // L
    [[1,1,1],[0,0,1]], // J
    [[1,1],[1,1]], // O
    [[1,1,0],[0,1,1]], // S
    [[0,1,1],[1,1,0]]  // Z
];

let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
let currentPiece = null, currentX = 3, currentY = 0;

// 生成新方块
function newPiece() {
    const index = Math.floor(Math.random() * SHAPES.length);
    currentPiece = SHAPES[index];
    currentX = 3;
    currentY = 0;
}

// 碰撞检测
function collision() {
    return currentPiece.some((row, i) => 
        row.some((cell, j) => 
            cell && (board[i + currentY]?.[j + currentX] || 
                    i + currentY >= ROWS || 
                    j + currentX < 0 || 
                    j + currentX >= COLS)
        )
    );
}

// 合并到棋盘
function merge() {
    currentPiece.forEach((row, i) => {
        row.forEach((cell, j) => {
            if (cell) board[i + currentY][j + currentX] = 1;
        });
    });
}

// 消除满行
function clearLines() {
    let lines = 0;
    for (let i = ROWS - 1; i >= 0; i--) {
        if (board[i].every(cell => cell)) {
            board.splice(i, 1);
            board.unshift(Array(COLS).fill(0));
            lines++;
            i++;
        }
    }
    if (lines) {
        score += lines * 100;
        document.getElementById('score').textContent = score;
    }
}

// 游戏循环
function gameLoop() {
    currentY++;
    if (collision()) {
        currentY--;
        merge();
        clearLines();
        newPiece();
        if (collision()) {
            alert('游戏结束！得分：' + score);
            location.reload();
        }
    }
    draw();
}

// 绘制画面
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制棋盘
    board.forEach((row, i) => {
        row.forEach((cell, j) => {
            if (cell) {
                ctx.fillStyle = '#333';
                ctx.fillRect(j * BLOCK_SIZE, i * BLOCK_SIZE, BLOCK_SIZE-1, BLOCK_SIZE-1);
            }
        });
    });

    // 绘制当前方块
    if (currentPiece) {
        ctx.fillStyle = '#f00';
        currentPiece.forEach((row, i) => {
            row.forEach((cell, j) => {
                if (cell) {
                    ctx.fillRect(
                        (currentX + j) * BLOCK_SIZE,
                        (currentY + i) * BLOCK_SIZE,
                        BLOCK_SIZE-1, BLOCK_SIZE-1
                    );
                }
            });
        });
    }
}

// 控制操作
document.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft') {
        currentX--;
        if (collision()) currentX++;
    }
    if (e.key === 'ArrowRight') {
        currentX++;
        if (collision()) currentX--;
    }
    if (e.key === 'ArrowDown') gameLoop();
    if (e.key === 'ArrowUp') {
        const rotated = currentPiece[0].map((_,i) => 
            currentPiece.map(row => row[i]).reverse()
        );
        const prev = currentPiece;
        currentPiece = rotated;
        if (collision()) currentPiece = prev;
    }
    draw();
});

newPiece();
setInterval(gameLoop, 1000);
</script>
</body>
</html>